<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="jquery-1.12.1.min.js"></script>
    <link rel="stylesheet" href="animate.css">
    <script src="touch.js"></script>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
            background-image: url("qiche/img/bg1.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .logo1{
            position: absolute;
            left:5%;
            top:2%;
            width: 20%;
            animation:bounceInLeft  1s ;
        }
        .logo2{
            position: absolute;
            left:40%;
            width: 30%;
            top:5%;
            animation:bounceInDown  1s ;
        }
        .tiaozhan{
            position: absolute;
            bottom:25%;
            left:20%;
            width: 60%;
            animation:bounceInLeft  1s ;
        }
        .guize{
            position: absolute;
            bottom:21%;
            left:40%;
            width: 20%;
            animation:bounceInRight  1s ;
        }
        .b1{
            position: absolute;
            left:10%;
            top:13%;
            width: 90%;
            animation: fadeInLeft 1s;
        }
        .b2{
            position: absolute;
            left:32%;
            top:28%;
            width: 60%;
            animation: fadeInRight 1s;
        }
        .b3{
            position: absolute;
            left:21%;
            top:34%;
            width: 75%;
            animation: fadeInRight 1s;
        }
        .guize1{
            width: 100%;
            height: 100%;
            position: absolute;
            left:0;
            top:0;
            background-color: black;
            opacity: 0.4;
            display: none;
        }
        .page_youxi{
            position: absolute;
            width: 72%;
            left:17%;
            top:19%;
            display: none;
        }
        .close{
            position: absolute;
            left:86%;
            width: 10%;
            top:26%;
            display: none;
        }
        .begin{
            width: 100%;
            height:100%;
            position: absolute;
            left: 0;
            top:0;
            background-image: url("qiche/img/page3_jiaocheng.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: none;
        }
        .kaishi{
            position: absolute;
            left:17%;
            top:51%;
            width: 65%;
        }
        .canvas{

        }
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
        .jishiqi{
            position: absolute;
            left:10%;
            top:5%;
            width: 35%;
        }
        .lvding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .hongding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .huangding{
             position: absolute;
            left:40%;
            top:20%;
            width: 20%;
         }
        .ding{
            position: absolute;
            left:40%;
            top:20%;
            width: 20%;
        }
        .start{
            position: absolute;
            width: 50%;
            bottom:40%;
            left:25%;
        }
        .anniuz{
            position: absolute;
            left:23%;
            bottom:10%;
            width: 15%;
        }
        .anniuy{
            position: absolute;
            right:24%;
            bottom:10%;
            width: 15%;
        }
        .jiashuqi{
            position: absolute;
            right:0%;
            bottom:14%;
            width: 17%;
        }
        .jianshuqi{
            position: absolute;
            right:0%;
            bottom:16%;
            width: 17%;
        }
        .jishi{
            color:white;
            position: absolute;
            left:26%;
            top:9%;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="img/zuo_logo.png" alt="" class="logo1">
        <img src="img/you_logo.png" alt="" class="logo2">
        <img src="img/tiaozhan_GO.png" alt="" class="tiaozhan">
        <img src="img/youxiguize.png" alt="" class="guize">
        <img src="img/saiche30S.png" alt="" class="b1">
        <img src="img/dizhonghai.png" alt="" class="b2">
        <img src="img/xuanfengcheshou.png" alt="" class="b3">
    </div>
    <div class="guize1">
    </div>
    <img src="img/page_youxiguize.png" alt="" class="page_youxi">
    <img src="img/close.png" alt="" class="close">
    <div class="begin">
        <img src="img/page3_kaishiyouxi.png" alt="" class="kaishi">
    </div>
    <canvas class="canvas"></canvas>
    <div class="div1">
        <img src="img/jishiqi.png" alt="" class="jishiqi">
        <img src="img/lvding.png" alt="" class="lvding">
        <img src="img/huangding.png" alt="" class="huangding">
        <img src="img/hongding.png" alt="" class="hongding">
        <img src="img/ding.png" alt="" class="ding">
        <img src="img/start.png" alt="" class="start">
        <img src="img/anniuz.png" alt="" class="anniuz">
        <img src="img/anniuy.png" alt="" class="anniuy">
        <img src="img/jianshuqi.png" alt="" class="jianshuqi">
        <img src="img/jiashuqi.png" alt="" class="jiashuqi">
        <div class="jishi">
            <p>0:0:<span class="daojishi">30</span></p>
        </div>
    </div>
    <script src="loading.js"></script>
<script>
    var timer=null;
    var timer123=null;
    var y= 1;
    var buer=true;
    var speed=0;
    var fenshu=0;
    var time123=30;
    var enemys=[];
    var enemys2=[];
    var kongzhi=2;
    var sudu=0;
    var ac=2;
    var canvas=document.querySelector(".canvas");
    var ctx=canvas.getContext("2d");
    var SCREEN_WIDTH = document.documentElement.clientWidth;
    var SCREEN_HEIGHT = document.documentElement.clientHeight;
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    $(function () {
        $(".guize").on("touchstart",function () {
            $(".guize1").css("display","block");
            $(".b1").css("display","none");
            $(".page_youxi").css("display","block");
            $(".close").css("display","block")
        });
        $(".close").on("touchstart",function () {
            $(".guize1").css("display","none");
            $(".b1").css("display","block");
            $(".page_youxi").css("display","none");
            $(".close").css("display","none")
        });
        $(".tiaozhan").on("touchstart",function () {
            $(".wrap").css("display","none");
            $(".begin").css("display","block");
            timer= setInterval(function () {
                if(y){
                    $(".kaishi").fadeOut();
                    y=0
                }else{
                    $(".kaishi").fadeIn();
                    y=1
                }
            },500)
        })
    });
    $(".kaishi").on("touchstart",function () {
        $(".begin").css("display","none");
        clearInterval(timer);
        loading({
            background:"img/shaidao.png",
            car1:"img/qiche.png",
            car2:"img/jiashuqiche.png",
            bullet1:"img/zhangai.png",
            bullet2:"img/zhangai1.png",
            bullet3:"img/zhangai2.png",
            bullet4:"img/zhangai3.png",
            saidao:"img/qipaoxian.png"
        },{
            complete:main

        });
        $(".div1").css("display","block")
    });
    //随机函数
    function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    //加载完图片以后进行的函数
    function main (obj) {

        //清除画布
        ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        //背景对象
        var bgImg = obj.background;
        var bgimg = {
            img: bgImg,
            w: bgImg.width,
            h: bgImg.height,
            x: 0,
            y: 0
        };
        //汽车对象
        var car1Img = obj.car1;
        var carimg = {
            img: car1Img,
            w: car1Img.width /2,
            h: car1Img.height /2,
            x: SCREEN_WIDTH / 2 - car1Img.width / 4,
            y: SCREEN_HEIGHT - car1Img.height * 1.5+85
        };
        //赛道对象
        var dao=obj.saidao;
        var sai={
            img:dao,
            w: dao.width/1.3 ,
            h: dao.height/1.3,
            x:0,
            y: SCREEN_HEIGHT*0.62
        };
        //障碍种类
        var zhangaiImg1=obj.bullet1;
        var zhangaiImg2=obj.bullet2;
        var zhangaiImg3=obj.bullet3;
        var zhangaiImg4=obj.bullet4;
        //障碍物构造函数
        function Enemy () {
            this.img=zhangaiImg1;
            this.w=zhangaiImg1.width/2;
            this.h=zhangaiImg1.height/2;
            this.x=rand(40,SCREEN_WIDTH-27-zhangaiImg1.width);
            this.y=-this.h;
            this.type=1;
        }
        Enemy.prototype.draw = function () {
            ctx.drawImage(this.img,this.x,this.y,this.w,this.h);
        };

        Enemy.prototype.move = function () {
            this.y += ac;
        };
        Enemy.prototype.canClear = function () {
            if (this.y>=SCREEN_HEIGHT){
                return true;
            }else{
                return false;
            }
        };
        function checkP(obj1,obj2){
            if(Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) <= obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) <= obj1.h / 2 + obj2.h / 2) {
                (obj1.x)
                return true;
            } else {
                return false;
            }
        }
        Enemy.prototype.changeType = function(type) {
            this.type = type;
            switch(this.type) {
                case 1:
                    this.img=zhangaiImg1;
                    this.w=zhangaiImg1.width/2;
                    this.h=zhangaiImg1.height/2;
                    this.x=rand(40,SCREEN_WIDTH-27-zhangaiImg1.width);
                    this.y=-this.h;
                    break;
                case 2:
                    this.img = zhangaiImg2;
                    this.w = zhangaiImg2.width/2;
                    this.h = zhangaiImg2.height/2;
                    this.x = rand(40,SCREEN_WIDTH-27-zhangaiImg2.width);
                    this.y = -this.h;
                    break;
                case 3:
                    this.img = zhangaiImg3;
                    this.w = zhangaiImg3.width/2;
                    this.h = zhangaiImg3.height/2;
                    this.x = rand(40,SCREEN_WIDTH-27-zhangaiImg3.width);
                    this.y = -this.h;
                    break;
                case 4:
                    this.img = zhangaiImg4;
                    this.w = zhangaiImg4.width/2;
                    this.h = zhangaiImg4.height/2;
                    this.x = rand(40,SCREEN_WIDTH-27-zhangaiImg4.width);
                    this.y = -this.h;
                    break;
            }
        };
        ctx.drawImage(obj.background,0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
        ctx.drawImage(obj.saidao,sai.x,sai.y,sai.w,sai.h)
        ctx.drawImage(carimg.img,carimg.x,carimg.y,carimg.w,carimg.h)
        //画画
        function drawAll() {
            ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
            speed+=kongzhi;
            sudu++;
            //判断加速
            $(".jiashuqi").on("touchstart",function () {
                $(".jiashuqi").css("display","none");
                carimg.img=obj.car2;
                kongzhi=4;
                ac=4;
                $(".jianshuqi").on("touchstart",function () {
                    carimg.img=obj.car1;
                    $(".jiashuqi").css("display","block");
                    kongzhi=2;
                    ac=2;
                })

            });
            //画背景
            ctx.drawImage(obj.background,0,speed,SCREEN_WIDTH,SCREEN_HEIGHT);
            ctx.drawImage(obj.background,0,speed - SCREEN_HEIGHT,SCREEN_WIDTH,SCREEN_HEIGHT);
            //画赛道
            ctx.drawImage(obj.saidao,sai.x,sai.y+speed,sai.w,sai.h);
            ////画障碍和删除多余的障碍
            if (sudu%66==0){
                var enemy = new Enemy();
                if (sudu%396 == 0){
                    enemy.changeType(2);
                }else if (sudu%660 ==0){
                    enemy.changeType(3);
                }else if (sudu%924 ==0){
                    enemy.changeType(4);
                }
                enemys.push(enemy);
                enemys2.push(enemy);
            }



            //删除出屏幕的障碍物
            for(var i = 0;i< enemys.length;i++) {
                var enemy = enemys[i];
                //判断撞车
                if(checkP(carimg,enemy)){
                    clearInterval(timer123);
                    $(".canvas").css("display","none");
                    $(".div1").css("display","none");
                    buer=false;
                    console.log(fenshu);
                    $.ajax({
                        url:"car_api.php",
                        type:"get",
                        dataType:"jsonp",
                        data:{
                            score:fenshu,
                            openid:openid,
                            type:"number"
                        },
                        success:function (data) {

                        }
                    })
                }
                if (enemy.canClear()) {
                    enemys.splice(i, 1);
                    i--;
                }
                enemy.draw();
                enemy.move();
            }
            //计数
            for(var k = 0;k< enemys2.length;k++){
                var enemy2 = enemys2[k];
                if (enemy2.y>carimg.y+carimg.h){
                    enemys2.splice(k,1);
                    fenshu++;
                }
            }
            //保持背景屏幕连续滚动
            if (speed>=SCREEN_HEIGHT){
                sai.y=SCREEN_HEIGHT;
                speed=0;
            }
            //画汽车
            ctx.drawImage(carimg.img,carimg.x,carimg.y,carimg.w,carimg.h);
            //判断运行window
            if(buer){
                window.requestAnimationFrame(drawAll);
            }

        }
        //控制红绿灯
        setTimeout(function () {
            $(".ding").css("display","none");
        },1000);
        setTimeout(function () {
            $(".hongding").css("display","none");
        },2000);
        setTimeout(function () {
            $(".huangding").css("display","none");
        },3000);
        setTimeout(function () {
            //画画
            drawAll();
            //倒计时
            timer123=setInterval(function () {
                time123--;
                $(".daojishi").text(time123);
                if(time123<10){
                    $(".daojishi").text("0"+time123);
                }
                if (time123==0){
                    clearInterval(timer123);
                    buer=false;
                    $(".canvas").css("display","none");
                    $(".div1").css("display","none");
                    $.ajax({
                        url:"car_api.php",
                        type:"get",
                        dataType:"jsonp",
                        data:{
                            score:fenshu,
                            openid:openid,
                            type:"number"
                        },
                        success:function (data) {

                        }
                    })
                }
            },1000);
            $(".lvding").fadeOut(500);
            $(".start").fadeOut(500);
            //控制汽车
            var zuoyou=10;
            $(".anniuz").on("touchstart",function (event) {
                carimg.x -=zuoyou;
                event.preventDefault();
                var timer =setInterval(function () {
                    carimg.x -=1
                },20);
                $(".anniuz").on("touchend",function () {
                    clearInterval(timer);
                    event.preventDefault();
                })
            });
            $(".anniuy").on("touchstart",function (event) {
                carimg.x +=zuoyou;
                event.preventDefault();
                var timer1 =setInterval(function () {
                    carimg.x +=1
                },20);
                $(".anniuy").on("touchend",function () {
                    clearInterval(timer1);
                    event.preventDefault();
                })
            });
        },4000)
    }
</script>

</body>
=======
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="car.css">
</head>
<body>

<!--过关啦页面-->
<section id="pageEnd_success">
            <img src="img_pageEnd/bg_pageEnd1.png" alt="" class="bg_pageEnd1">
            <img src="img_pageEnd/invitation_2.png" alt="" class="invitation_2">
            <img src="img_pageEnd/rankList.png" alt="" class="rankList">
    <ul id="word_success">
        <li>你闯过了<span class="duoshaoge"></span>个障碍物</li>
        <li>胜出了全国<span>88%</span>的玩家</li>
    </ul>
</section>

<!--邀请导师-->
<section id="pageShare">
    <li id="bg_share"></li>
    <img src="img_pageEnd/invitation_3.png" alt="" class="invitation_3">
</section>

<!--排行榜-->
<section id="pageRank">
    <img src="img_pageEnd/bg_rank.png" alt="" class="bg_rank">
    <ul id="rank_list">
        <li style="color:#EDEA4A">30&nbsp&nbsp&nbsp&nbsp 赵某某 &nbsp&nbsp&nbsp&nbsp 500 &nbsp&nbsp&nbsp&nbsp</li>
        <li>xxx2</li>
        <li>xxx3</li>
        <li>xxx4</li>
    </ul>
</section>

<!--过关失败-->
<section id="pageEnd_fail">
    <img src="img_pageEnd/bg_pageEnd2.png" alt="" class="bg_pageEnd2">
    <img src="img_pageEnd/againGo.png" alt="" class="againGo">
    <img src="img_pageEnd/rankList.png" alt="" class="rankList">
    <ul id="word_fail">
        <li>你只闯过了<span>3</span>个障碍物</li>
        <li>胜出了全国<span>7%</span>的玩家</li>
    </ul>
</section>

<!--抽奖页面-->
<section id="random_prize">
    <img src="img_pageEnd/bg_pageEnd3.png" alt="" class="bg_pageEnd3">
    <img src="img_pageEnd/turnDish.png" alt="" class="turnDish">
    <img src="img_pageEnd/turnDish_1.png" alt="" class="turnDish_1">
    <img src="img_pageEnd/finger.png" alt="" class="finger">
    <!--<img src="img_pageEnd/carNormalState.png" alt="" class="carNormalState">-->
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_1">
</section>

<!--抽奖成功-->
<section id="random_prize_suc">
    <img src="img_pageEnd/randomPrizeSuc.png" alt="" class="randomPrizeSuc">
    <img src="img_pageEnd/prizeBook.png" alt="" class="prizeBook">
    <img src="img_pageEnd/writePersonMessage.png" alt="" class="writePersonMessage">
</section>

<!--你的好友邀请你做他的导师-->
<section id="your_friend_invitation">
    <img src="img_pageEnd/youBeinvited.png" alt="" class="youBeinvited">
    <img src="img_pageEnd/levelUp.png" alt="" class="levelUp">
    <img src="img_pageEnd/youTooShit.png" alt="" class="youTooShit">
    <ul id="your_friend_invitation_ul1">
        <li>你的好友&nbsp&nbsp<span>魔鬼</span></li>
        <li>邀请你做他的导师</li>
    </ul>
    <ul id="your_friend_invitation_ul2">
        <li>闯过了&nbsp&nbsp<span style="color: #EDEA4A">300</span>&nbsp&nbsp个障碍物</li>
        <li>胜出了全国&nbsp&nbsp<span style="color: #EDEA4A">75%</span>&nbsp&nbsp的玩家</li>
    </ul>
</section>

<!--拜谢你-->
<section id="thankyou">
    <img src="img_pageEnd/thankyou.png" alt="" class="thankyou">
    <img src="img_pageEnd/challengeGo2.png" alt="" class="challengeGo2">
    <ul id="thankyou_word">
        <li><span>魔鬼</span>&nbsp&nbsp拜谢你</li>
    </ul>
</section>

<!--没有好友选择让你晋级-->
<section id="no_friends_levelUpYou">
    <img src="img_pageEnd/noFriendsInviteYou.png" alt="" class="noFriendsInviteYou">
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_2">
    <img src="img_pageEnd/inviteOtherFriends.png" alt="" class="inviteOtherFriends">
    <ul id="noTeacherChooseYou">
        <li>(已有<span style="color: #EDEA4A">888</span>位导师选择"你丫太差了")</li>
    </ul>
</section>

<!--成功晋级,可以抽奖-->
<section id="levelUp_success">
    <img src="img_pageEnd/youCanRandomPrize.png" alt="" class="youCanRandomPrize">
    <img src="img_pageEnd/rightNowGo.png" alt="" class="rightNowGo">
</section>

<!--你被淘汰了-->
<section id="you_are_out">
    <img src="img_pageEnd/youAreOut.png" alt="" class="youAreOut">
    <img src="img_pageEnd/againGo_1.png" alt="" class="againGo_2">
</section>

<!--领奖信息登记-->
<section id="register_prize_message">
    <img src="img_pageEnd/registerMessage.png" alt="" class="registerMessage">
    <img src="img_pageEnd/fillDone.png" alt="" class="fillDone">
    <ul id="register_prize_message_list">
        <li>
            <input type="text" class="username" >
            <input type="text" class="tel">
            <select type="text" id="province" placeholder="省">
            <select type="text" id="city" placeholder="市">
            <input type="text" class="address" placeholder="详细地址">
        </li>
    </ul>
</section>


<!--信息提交成功-->
<img src="img_pageEnd/messageSubmitSuc.jpg" alt="" class="messageSubmitSuc">
<!--抽奖失败-->
<img src="img_pageEnd/gotPrizeFail.jpg" alt="" class="gotPrizeFail">
<!--恭喜你,好棒,现在马上去抽奖吧-->
<img src="img_pageEnd/congratulations.jpg" alt="" class="congratulations">


<script src="jquery-1.12.1.min.js"></script>
<script src="car.js"></script>
<script>
    $(".duoshaoge").text(fenshu)
</script>

</body>
</html>